{% extends "v2-base.html" %}
{% load i18n %}
{% get_current_language as LANGUAGE_CODE %}

{% block headtitle %}{% trans "A resource for open web HTML5 developers" %}{% endblock %}

{% block body %}

<section class="masthead">
  <a href="https://developers.google.com/web/updates/2015/03/devtools-timeline-now-providing-the-full-story">
    <div class="container">
      <div id="image"></div>
      <h2>
        <span class="small">Now providing the full story..</span>
        <span class="large">DevTools Timeline</span>
        <span class="learnmore">Learn more</span>
      </h2>
    </div>
  </a>
</section>

<section class="search">
  <div class="container" itemscope itemtype="http://schema.org/WebSite">
    <meta itemprop="url" content="https://www.html5rocks.com/"/>
    <form action="/{{LANGUAGE_CODE}}/search" role="search" itemprop="potentialAction" itemscope itemtype="http://schema.org/SearchAction">
      <legend>Search</legend>
      <label for="q">{% trans "Search" %}:</label>
      <meta itemprop="target" content="http://www.html5rocks.com/en/search?q={search_term_string}" />
      <input type="search"  itemprop="query-input" name="q" id="q" autocomplete="off" placeholder="{% trans "Search" %}" />
      <input type="submit" id="search-button" value="{% trans "Search" %}">
    </form>
  </div>
</section>

<div class="divider"></div>

<section class="latest-articles">
  <div class="container">
    <h2>{% trans "Latest Articles" %}</h2>
    <a class="rss-feed" alt="{% trans "RSS" %}" href="http://feeds.feedburner.com/html5rocks">RSS Feed</a>
    <ul>
      {% for tut in tutorials %}
        {% if forloop.counter0 < 9 %}
          <li>
            <a href="{{tut.url}}">
              <span class="left">
                <span class="author" data-author_id="{{ tut.author.key.name }}"><img src="/static/images/profiles/75/{{tut.author.key.name}}.75.png" alt="{{ tut.author.given_name }} {{ tut.author.family_name }}" title="{{ tut.author.given_name }} {{ tut.author.family_name }}" width="60" height="60"></span>
              </span>

              <span class="right">
                <span class="title">
                  {{tut.title|safe}}{% if tut.subtitle %}: {{tut.subtitle|safe}}{% endif %}
                </span>
                <!--span class="date">{{tut.publication_date.month}}/{{tut.publication_date.day}}</span -->
                <span class="description">{{tut.description}}</span>
              </span>

              <span class="clear"></span>
            </a>
          </li>
        {% endif %}

      {% empty %}
        Sorry, nothing available yet. Become a <a href="https://github.com/html5rocks/www.html5rocks.com/blob/master/CONTRIBUTING.md" target="_blank">contributor</a>.
      {% endfor %}
    </ul>
    <div class="clear"></div>
  </div>
</section>

<section class="landing-pages">
  <div class="panel mobile">
    <a href="https://developers.google.com/web/fundamentals/">
      <div class="left">
        <div class="icon"></div>
      </div>
      <div class="right">
        <h2>{% trans "Mobile" %}</h2>
        <p>
          {% blocktrans %}
          Web developers can use the same set of technologies they know and love
          to build rich web applications that work across different device
          types.
          {% endblocktrans %}
        </p>
      </div>
    </a>
    <div class="clear"></div>
  </div>
  <div class="panel performance">
    <a href="https://developers.google.com/web/fundamentals/performance/">
      <div class="left">
        <div class="icon"></div>
      </div>
      <div class="right">
        <h2>{% trans "Performance" %}</h2>
        <p>
          {% blocktrans %}
          Performance is a critical to your user experience. Learn how to accelerate your sites network, rendering and JavaScript performance.
          {% endblocktrans %}
        </p>
      </div>
    </a>
    <div class="clear"></div>
  </div>
  <div class="clear"></div>
</section>

<div class="padder google-project">
  <div class="container">
  {% blocktrans %}
    <strong>HTML5 Rocks</strong> is a <strong><img src="/static/images/google_logo_small.png" alt="Google logo" title="Google"></strong> project.
  {% endblocktrans %}
  </div>
</div>

{% endblock %}
